<template>
  <el-card header="新建商家">
    <div style="width: 80%; margin: auto;">
      <el-steps :active="active" finish-status="success">
        <el-step title="商品信息"></el-step>
        <el-step title="规格库存"></el-step>
        <el-step title="完成创建"></el-step>
      </el-steps>
      <el-form label-position="right" label-width="80px" style="margin-top: 20px">
        <div v-show="active === 0">
          <el-form-item label="商品图片">
            <el-upload
              ref="form"
              action="https://api.sc-edu.com/tool/upimg/"
              name="Img"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input placeholder="请输入商家名称"></el-input>
          </el-form-item>
          <el-form-item label="商品标签">
            <el-select
              v-model="value10"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签">
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-show="active === 1">
          <div style="display: flex" class="spec" v-for="(item, index) in specList" :key="index">
            <el-form-item label="型号" style="flex: 1;">
              <el-input placeholder="请输入型号" readonly :value="item.spec"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input-number readonly :value="item.num"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
              <el-input-number readonly :value="item.price"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-delete" type="danger" @click="delSpec(index)">删除型号</el-button>
            </el-form-item>
          </div>
          <div style="display: flex" class="spec">
            <el-form-item label="型号" style="flex: 1;">
              <el-input placeholder="请输入型号" v-model="specInfo.spec"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input-number :precision="0" :step="1" :min="0" v-model="specInfo.num"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
              <el-input-number :precision="2" :step="0.01" :min="0" v-model="specInfo.price"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-circle-plus-outline" @click="addSpec">添加型号</el-button>
            </el-form-item>
          </div>
        </div>
        <div v-show="active === 2">

        </div>
      </el-form>
      <div style="text-align: center">
        <el-button v-if="active > 0 && active < 3" @click="previous" >上一步</el-button>
        <el-button v-if="active <= 2" @click="nextStep">下一步</el-button>
        <el-button v-if="active === 3" @click="finish">完成</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: "create",
    data() {
      return {
        active: 0,
        dialogImageUrl: '',
        dialogVisible: false,
        options5: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value10: [],
        specList: [],
        specInfo: {
          spec: '',
          num: '',
          price: ''
        }
      }
    },
    methods: {
      previous: function () {
        this.active -= 1;
        if (this.active === 2) {
          this.active -= 1;
        }
      },
      nextStep: function () {
        this.active += 1;
        if (this.active === 2) {
          this.active += 1;
        }
      },
      finish: function () {
        this.$router.push('/item')
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      addSpec() {
        if (!this.specInfo.spec) {
          this.$message.error('请输入规格');
          return;
        }
        if (!this.specInfo.price) {
          this.$message.error('请输入价格');
          return;
        }
        if (!this.specInfo.num) {
          this.$message.error('请输入库存数量');
          return;
        }
        this.specList.push({
          spec: this.specInfo.spec,
          num: this.specInfo.num,
          price: this.specInfo.price
        });
        this.specInfo = {
          spec: '',
          num: '',
          price: ''
        }
      },
      delSpec(index) {
        this.specList.splice(index, 1);
      }
    }
  }
</script>


<style scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
